<template>
  <div class="flex-grow-1 hom-statics-box  container-p-y" :class="[layout]">
    <!-- <count-panel-group :data-total-count="dataTotalCount" :login-count="loginCount" :video-count="videoCount" /> -->
    <div class="row mb-4">
      <div class="col-xl-6 col-lg-5 col-12 mb-4">
        <el-card class="h-100">
          <div class="d-flex align-items-end row">
            <div class="col-7">
              <div class="card-body">
                <h5 class="card-title mb-2">{{$t('home.token')}}</h5>
                <p class="mb-3 token">{{longToken}}</p>
                <!-- <h4 class="text-primary mb-3">$48.9k</h4> -->
                <el-button type="primary" @click="handleCopyToken">{{$t('home.copybtn')}}</el-button>
              </div>
            </div>
            <div class="col-5 text-center text-sm-left">
              <div class="card-body pb-0 px-0 px-md-4">
                <img height="140" src="../assets/image/trophy.png" alt="view sales">
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <div class="col-xl-2 col-lg-3 col-sm-4 col-6 mb-4">
        <el-card class="h-100">
          <div class="badge p-2 bg-label-info mb-2 rounded"><i class="svg-icon-money"></i></div>
          <h5 class="card-title mb-4 pt-2">{{$t('home.totalBalance')}}</h5>
          <p class="mb-2 mt-1 home-st-txt-clor">{{balance}}</p>
          <!-- <div class="pt-1">
            <span class="badge bg-label-secondary">+25.2%</span>
          </div> -->
        </el-card>
      </div>
      <div class="col-xl-2 col-lg-3 col-sm-4 col-6 mb-4">
        <el-card class="h-100">
          <div class="badge p-2 bg-label-info mb-2 rounded"><i class="ti ti-chart-bar ti-md"></i></div>
          <h5 class="card-title mb-4 pt-2">{{$t('home.totalSalees')}}</h5>
          <p class="mb-2 mt-1 home-st-txt-clor">$4,673</p>
          <!-- <div class="pt-1">
            <span class="badge bg-label-secondary">+25.2%</span>
          </div> -->
        </el-card>
      </div>
      <div class="col-xl-2 col-lg-3 col-sm-4 col-6 mb-4">
        <el-card class="h-100">
          <div class="badge p-2 bg-label-info mb-2 rounded"><i class="ti ti-chart-bar ti-md"></i></div>
          <h5 class="card-title mb-4 pt-2">{{$t('home.totalLogin')}}</h5>
          <p class="mb-2 mt-1 home-st-txt-clor">{{loginCount}}</p>
          <!-- <div class="pt-1">
            <span class="badge bg-label-secondary">+25.2%</span>
          </div> -->
        </el-card>
      </div>
    </div>
    <div class="row">
      <div class="col-xl-7 mb-4">
        <el-card class="h-100">
          <div class="row justify-content-between">
            <h5 class="card-title mb-5">{{$t('home.statisticsby')}}：<el-input style="width:240px" v-model="selPerson" @keyup.enter.native="onBoxEnter"></el-input>
            <!-- <el-select style="width:150px" v-model="selPerson" @change="changePerson" v-if="persons.length>0">
              <el-option v-for="(item,idx) in persons" :label="item.createBy" :value="item.createBy"></el-option>
            </el-select> -->
          </h5>
          </div>
          <div id="lineChart" style="width:100%;height:550px;"></div>
        </el-card>
      </div>
      <div class="col-xl-5 mb-4">
        <el-card>
          <div>
            <h5 class="card-title m-0 me-2">{{$t('home.recent')}}</h5>
          </div>
          <ul class="p-0 m-0 index-m-fifylist">
            <li class="d-flex align-items-center mb-3" v-for="(item,idx) in fiftyList" :key="idx">
              <div class="flex-shrink-0 me-4">
                {{item.createBy}}
              </div>
              <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                <div class="me-2">
                  <h6 class="mb-0">{{item.email}}</h6>
                  <small class="d-flex align-items-center">
                    <i class="ri-calendar-line ri-16px"></i>
                    <span class="ms-2">{{parseTime(item.createTime.replace('T',' '))}}</span>
                  </small>
                </div>
                <div class="r-plt" v-html="platformFormat(item.platform)"></div>
              </div>
            </li>
            <!-- <li class="d-flex align-items-center mb-6">
              <div class="avatar flex-shrink-0 me-4">
                <img src="http://112.124.43.68:10016/profile/upload/2024/10/14-b8e724b6-5947-4ffc-adad-b0b2567286b6.jpg"
                  alt="avatar" class="rounded-3">
              </div>
              <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                <div class="me-2">
                  <h6 class="mb-0">Conference call</h6>
                  <small class="d-flex align-items-center">
                    <i class="ri-calendar-line ri-16px"></i>
                    <span class="ms-2">21 Jul | 08:20-10:30</span>
                  </small>
                </div>
                <div class="badge bg-label-warning rounded-pill">Dinner</div>
              </div>
            </li>
            <li class="d-flex align-items-center mb-6">
              <div class="avatar flex-shrink-0 me-4">
                <img src="http://112.124.43.68:10016/profile/upload/2024/10/14-b8e724b6-5947-4ffc-adad-b0b2567286b6.jpg"
                  alt="avatar" class="rounded-3">
              </div>
              <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                <div class="me-2">
                  <h6 class="mb-0">Meeting with Mark</h6>
                  <small class="d-flex align-items-center">
                    <i class="ri-calendar-line ri-16px"></i>
                    <span class="ms-2">21 Jul | 08:20-10:30</span>
                  </small>
                </div>
                <div class="badge bg-label-secondary rounded-pill">Meetup</div>
              </div>
            </li>
            <li class="d-flex align-items-center mb-6">
              <div class="avatar flex-shrink-0 me-4">
                <img src="http://112.124.43.68:10016/profile/upload/2024/10/14-b8e724b6-5947-4ffc-adad-b0b2567286b6.jpg"
                  alt="avatar" class="rounded-3">
              </div>
              <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                <div class="me-2">
                  <h6 class="mb-0">Meeting in Oakland</h6>
                  <small class="d-flex align-items-center">
                    <i class="ri-calendar-line ri-16px"></i>
                    <span class="ms-2">21 Jul | 08:20-10:30</span>
                  </small>
                </div>
                <div class="badge bg-label-danger rounded-pill">Dinner</div>
              </div>
            </li>
            <li class="d-flex align-items-center mb-6">
              <div class="avatar flex-shrink-0 me-4">
                <img src="http://112.124.43.68:10016/profile/upload/2024/10/14-b8e724b6-5947-4ffc-adad-b0b2567286b6.jpg"
                  alt="avatar" class="rounded-3">
              </div>
              <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                <div class="me-2">
                  <h6 class="mb-0">Call with hilda</h6>
                  <small class="d-flex align-items-center">
                    <i class="ri-calendar-line ri-16px"></i>
                    <span class="ms-2">21 Jul | 08:20-10:30</span>
                  </small>
                </div>
                <div class="badge bg-label-success rounded-pill">Meditation</div>
              </div>
            </li>
            <li class="d-flex align-items-center mb-6">
              <div class="avatar flex-shrink-0 me-4">
                <img src="http://112.124.43.68:10016/profile/upload/2024/10/14-b8e724b6-5947-4ffc-adad-b0b2567286b6.jpg"
                  alt="avatar" class="rounded-3">
              </div>
              <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                <div class="me-2">
                  <h6 class="mb-0">Call with hilda</h6>
                  <small class="d-flex align-items-center">
                    <i class="ri-calendar-line ri-16px"></i>
                    <span class="ms-2">21 Jul | 08:20-10:30</span>
                  </small>
                </div>
                <div class="badge bg-label-success rounded-pill">Meditation</div>
              </div>
            </li>
            <li class="d-flex align-items-center mb-6">
              <div class="avatar flex-shrink-0 me-4">
                <img src="http://112.124.43.68:10016/profile/upload/2024/10/14-b8e724b6-5947-4ffc-adad-b0b2567286b6.jpg"
                  alt="avatar" class="rounded-3">
              </div>
              <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                <div class="me-2">
                  <h6 class="mb-0">Call with hilda</h6>
                  <small class="d-flex align-items-center">
                    <i class="ri-calendar-line ri-16px"></i>
                    <span class="ms-2">21 Jul | 08:20-10:30</span>
                  </small>
                </div>
                <div class="badge bg-label-success rounded-pill">Meditation</div>
              </div>
            </li>
            <li class="d-flex align-items-center mb-6">
              <div class="avatar flex-shrink-0 me-4">
                <img src="http://112.124.43.68:10016/profile/upload/2024/10/14-b8e724b6-5947-4ffc-adad-b0b2567286b6.jpg"
                  alt="avatar" class="rounded-3">
              </div>
              <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                <div class="me-2">
                  <h6 class="mb-0">Call with hilda</h6>
                  <small class="d-flex align-items-center">
                    <i class="ri-calendar-line ri-16px"></i>
                    <span class="ms-2">21 Jul | 08:20-10:30</span>
                  </small>
                </div>
                <div class="badge bg-label-success rounded-pill">Meditation</div>
              </div>
            </li>
            <li class="d-flex align-items-center mb-6">
              <div class="avatar flex-shrink-0 me-4">
                <img src="http://112.124.43.68:10016/profile/upload/2024/10/14-b8e724b6-5947-4ffc-adad-b0b2567286b6.jpg"
                  alt="avatar" class="rounded-3">
              </div>
              <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                <div class="me-2">
                  <h6 class="mb-0">Call with hilda</h6>
                  <small class="d-flex align-items-center">
                    <i class="ri-calendar-line ri-16px"></i>
                    <span class="ms-2">21 Jul | 08:20-10:30</span>
                  </small>
                </div>
                <div class="badge bg-label-success rounded-pill">Meditation</div>
              </div>
            </li>
            <li class="d-flex align-items-center">
              <div class="avatar flex-shrink-0 me-4">
                <img src="http://112.124.43.68:10016/profile/upload/2024/10/14-b8e724b6-5947-4ffc-adad-b0b2567286b6.jpg"
                  alt="avatar" class="rounded-3">
              </div>
              <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                <div class="me-2">
                  <h6 class="mb-0">Meeting with Carl</h6>
                  <small class="d-flex align-items-center">
                    <i class="ri-calendar-line ri-16px"></i>
                    <span class="ms-2">21 Jul | 08:20-10:30</span>
                  </small>
                </div>
                <div class="badge bg-label-primary rounded-pill">Business</div>
              </div>
            </li> -->
          </ul>
        </el-card>
      </div>
    </div>
    <!-- <el-row :gutter="30" style="margin-top:.5rem;">
      <el-col :xs="24" :sm="12" :lg="12">
        <el-row>
          <el-card class="box-card" style="height:300px;">
            <div slot="header" class="clearfix">
              <span>Token</span>
            </div>
            <el-input type="textarea" :rows="10" v-model="longToken" resize="none" disabled></el-input>
          </el-card>
        </el-row>
        <el-row>
        </el-row>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="12">
        <el-card class="box-card" style="height:300px;">
          <div slot="header" class="clearfix">
            <span>Notice</span>
          </div>
          <div v-if="sysNotice != null" class="sys-notice" v-html="sysNotice.noticeContent" />
        </el-card>
      </el-col>
    </el-row>
    <el-card class="box-card" style="margin-top:1rem;">
      <div slot="header" class="clearfix">
        <div>
          <div style="float: left">
            <span>登录日志</span>
          </div>
          <div style="float: right">
            <a @click="moreLog()">更多</a>
          </div>
        </div>
      </div>
      <div lass="login-str">
        <el-row v-for="(item, index) in logList">
          <el-row><span style="padding-right: 10px">{{ parseTime(item.loginTime, '{m}月{d}日') }}&nbsp;
              {{ item.msg }}</span></el-row>
          <el-row>
            <div class="ip-val"
              style="margin: 3px 0px 5px;border-bottom: #e6ebf5 solid 1px;color: #666666;font-size: 0.9rem">
              IP地址：{{ item.ipaddr }}（{{ item.os }}）
            </div>
          </el-row>
        </el-row>
      </div>
    </el-card> -->
    <Footer :layout="layout" />
  </div>
</template>

<script>
import { listType } from "@/api/mail/type";
import { listTypeplatform } from "@/api/mail/typeplatform";
import { mapGetters } from 'vuex'
// import Chart from 'chart.js/auto';
const echarts = require("echarts");
import {listOrdersummary} from '@/api/mail/ordersummary'
import {getUserAccount} from '@/api/bonus/account'
import {getFiftyList} from '@/api/mail/order'
// import {Chart} from 'chartjs'
import Footer from '../components/Footer'
// import PanelGroup from './dashboard/PanelGroup'
// import LineChart from './dashboard/LineChart'
// import RaddarChart from './dashboard/RaddarChart'
// import PieChart from './dashboard/PieChart'
// import BarChart from './dashboard/BarChart'
import TableProject from "./dashboard/TableProject";
import RecentMessage from "./dashboard/RecentMessage";
import CalendarNote from "./dashboard/CalendarNote";
import CountPanelGroup from "./dashboard/CountPanelGroup";
import { list, getLoginCount } from "@/api/monitor/logininfor";
import { getLatestNotice } from "@/api/system/notice";

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

export default {
  name: 'Index',
  components: {
    CountPanelGroup, Footer,
    // LineChart,
    // RaddarChart,
    // PieChart,
    // BarChart,
    TableProject,
    RecentMessage,
    CalendarNote
  },
  computed: {
    ...mapGetters([
      'name'
    ]),
    layout() {
      return localStorage.getItem('v-layout-content') || 'container-xxl';
    },
    username() {
      return this.$store.getters.name
    }
  },
  async mounted() {
    this.initData();
    let res=await getUserAccount();
    this.balance=res.data.balance;
    this.selPerson=this.name;

    let _allPls=[];
    
    let promises=[];
    let param = { pageNum: 1, pageSize: 1000 }
    res=await listType(param);
    res.rows.filter((item)=>{
      let param = { pageNum: 1, pageSize: 9999, mailTypeCode: item.mailTypeCode }
      promises.push(listTypeplatform(param));
    })
    let allres=await Promise.all(promises);
    allres.map(_res=>{
      _allPls=[..._allPls,..._res.rows];
    })
    this.allmailPlatformList = _allPls;
    console.log(this.allmailPlatformList)
    
    this.queryChartData();

    this.queryFiftyList();
    this.initQuery();
  },
  data() {
    return {
      intervalFift:null,
      allmailPlatformList:[],
      fiftyList:[],
      myLineChart:null,
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
      {
        label: "My First dataset",
        backgroundColor: "rgba(220,220,220,0.2)",
        borderColor: "rgba(220,220,220,1)",
        borderWidth: 1,
        hoverBackgroundColor: "rgba(220,220,220,0.2)",
        hoverBorderColor: "rgba(220,220,220,1)",
        data: [65, 59, 80, 81, 56, 55, 40],
        yAxisID: "y-axis-0",
      }, {
        label: "My Second dataset",
        backgroundColor: "rgba(220,220,220,0.2)",
        borderColor: "rgba(220,220,220,1)",
        borderWidth: 1,
        hoverBackgroundColor: "rgba(220,220,220,0.2)",
        hoverBorderColor: "rgba(220,220,220,1)",
        data: [28, 48, 40, 19, 86, 27, 90]
      }
    ],
    options: {},
      alllist:[],
      selPerson:'',
      persons:[],
      balance:0,
      longToken: null,
      logo: null,
      logList: [],
      oneVideoStyle: 'width: 100%;max-height: 420px;',
      lineChartData: lineChartData.newVisitis,
      videoCount: 0,
      dataTotalCount: 0,
      loginCount: 0,
      sysNotice: null
    }
  },
  destroyed(){
    if(this.intervalFift){
      clearInterval(this.intervalFift);
    }
  },
  methods: {
    initQuery(){
      let that=this;
      this.intervalFift=setInterval(() => {
        that.queryFiftyList();
      }, 5000);
    },
    async queryFiftyList(){
      let res=await getFiftyList();
      this.fiftyList=res.rows;
      setTimeout(()=>{
        document.getElementsByClassName('index-m-fifylist')[0].scrollTop=0;
      },300)
    },
    // Platform字典翻译
    platformFormat(_platform) {
      let item=this.allmailPlatformList.filter(r=>{
        return r.platformCode == _platform;
      });
      if(item.length>0)
        return '<img class="index-row-img-icon" src="'+item[0].icon+'"/><i class="'+item[0].platformCode+'">'+item[0].platformName+'</i>';
      else
        return ''
      //return this.selectDictLabel(this.platformOptions, row.platform);
    },
    async queryChartData(){
      let res=await listOrdersummary({pageNum:1,pageSize:1000,createBy:this.selPerson});
      this.alllist=res.rows;
      if(res.rows.length>0){
        this.persons=this.filterList(res.rows,'createBy');
        // this.selPerson=this.persons[0].createBy;
      }
      this.changePerson(this.selPerson);
    },
    onBoxEnter(){
      // document.getElementById('lineChart').innerHTML='';
      this.queryChartData();
    },
    changePerson(_person){
      let res={rows:this.alllist};
      res.rows.map(item=>{
        item.createTime=item.createTime.split(' ')[0];
      })
      let datarows=this.filterList(res.rows,'createTime');
      
      let days=datarows.map(r=>{
        return r.createTime;
      })
      console.log('x轴...时间',days)
      console.log(datarows)

      datarows=this.filterList(res.rows,'platform');
      let platforms=datarows.map(r=>{
        return r.platform;
      })
      
      console.log('平台...',platforms)
      let seriesdatas=[];
      
      let colorEnum={apple:'#666CFF',facebook:'#FDB528',tiktok:'#836AF9',telegram:'#FF8132'}
      
      if(days.length==0){
        let day=new Date();
        let yday=new Date(new Date().setDate(day.getDate()-1));
        let yyday=new Date(new Date().setDate(yday.getDate()-1));

        console.log(this.parseTime(day,'{y}-{m}-{d}'))
        console.log(this.parseTime(yday,'{y}-{m}-{d}'))
        console.log(this.parseTime(yyday,'{y}-{m}-{d}'))

        let dayStr=this.parseTime(day,'{y}-{m}-{d}');
        let ydayStr=this.parseTime(yday,'{y}-{m}-{d}');
        let yydayStr=this.parseTime(yyday,'{y}-{m}-{d}');
        days=[yydayStr,ydayStr,dayStr];

        platforms=['apple','facebook','tiktok','telegram'];
        seriesdatas.push({name:'apple',type:'line',color:colorEnum.apple,lineStyle:{width:3},smooth: true,showSymbol: false,data:[0,0,0]});
        seriesdatas.push({name:'facebook',type:'line',color:colorEnum.facebook,lineStyle:{width:3},smooth: true,showSymbol: false,data:[0,0,0]});
        seriesdatas.push({name:'tiktok',type:'line',color:colorEnum.tiktok,lineStyle:{width:3},smooth: true,showSymbol: false,data:[0,0,0]});
        seriesdatas.push({name:'telegram',type:'line',color:colorEnum.telegram,lineStyle:{width:3},smooth: true,showSymbol: false,data:[0,0,0]});
      }else{
        days.sort();
        platforms.map(p=>{
        let _rows=[];
        days.map(d=>{
          let rows=res.rows.map(r=>{
            if(r.createBy==_person&&r.platform==p&&r.createTime==d){
              return r.count0;
            }else{
              return 0;
            }
          })
          let _total=0;
          rows.map(v=>{
            _total+=v;
          })
          _rows.push(_total);
        })
        seriesdatas.push({name:p,type:'line',color:colorEnum[p],lineStyle:{width:3},smooth: true,showSymbol: false,data:_rows})
      })
      }
      
      console.log('seriesdatas...',seriesdatas)
        //#E5E5E8

      // 指定图表的配置项和数据
      var option = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            type: 'plain',
            data: platforms,
            icon:'circle',
            right:60
          },
          grid: {
            left: '1%',
            right: '4%',
            bottom: '1%',
            containLabel: true
          },
          xAxis: {
            splitLine: {
              show: true
            },
            type: 'category',
            boundaryGap: false,
            data: days
          },
          yAxis: {
            type: 'value',
            splitLine: {
              show: true
            },
          },
          series: seriesdatas
      };
      if(this.myLineChart)
        this.myLineChart.dispose();
      var myChart = echarts.init(document.getElementById('lineChart'));


      let _theme = localStorage.getItem('v-style');
      if(_theme=='dark-style'){
        option.legend.textStyle={
              color:'#9496AE'
            };
        option.xAxis.splitLine.lineStyle={
                color:'#464964'
              };
        option.xAxis.axisLabel={
              color:'#74768E'
            };
        option.yAxis.splitLine.lineStyle={
                color:'#464964'
              }
      }
      
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);

      this.myLineChart=myChart;
      window.addEventListener('resize',()=>{
        myChart.resize();
      })
    },
    filterList(list, key) {
        let obj = {};
        list.forEach(item=>{
            obj[item[key]]=item;
        });
        return Object.values(obj);
    },
    handleCopyToken() {
      //this.$clipboardConfig.autoSetContainer = true; // 可选，解决移动端可能的问题
      this.$copyText(this.longToken).then(() => {
        this.$message.success('复制成功！');
      }, () => {
        this.$message.error('复制失败！');
      });
    },
    initData() {
      /** 查询登录日志列表 */
      list({ pageNum: 1, pageSize: 10 }).then(response => {
        this.logList = response.rows;
      }
      )
      // 获取今天登录次数
      getLoginCount().then(response => {
        this.loginCount = response.data;
      }
      )
      getLatestNotice().then(response => {
        this.sysNotice = response.data;
        //this.$refs['divNotice'].innerHTML = 'hello' + response.data.noticeContent;
      }
      )
      this.longToken = this.$store.getters.token
    },
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    },
    initWebSocket() {
      const that = this;
      if (typeof (WebSocket) == 'undefined') {
        this.$notify({
          title: '提示',
          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器！',
          type: 'warning',
          duration: 0
        });
      } else {
        if (this.username != null && this.username !== '') {
          // 实例化socket，这里我把用户名传给了后台，使后台能判断要把消息发给哪个用户，其实也可以后台直接获取用户IP来判断并推送
          const socketUrl = 'ws://localhost:8080/wsapi/WEB_' + this.username + '/sign';
          this.socket = new WebSocket(socketUrl);
          // 监听socket打开
          this.socket.onopen = function () {
            console.log('浏览器WebSocket已打开');
          };
          // 监听socket消息接收
          this.socket.onmessage = function (msg) {
            // 转换为json对象
            console.log(msg)
            this.msgSuccess(msg);
            // const data = JSON.parse(msg.data);
            // that.$notify({
            //   title: '建立连接',
            //   // 这里也可以把返回信息加入到message中显示
            //   message: '实时报警服务连接成功，点击查看报警信息详情',
            //   type: 'success',
            //   duration: 0,
            //   onClick: () => {
            //     // that.$router.push({
            //     //   path: '/alarmManage/monitAlarmInfo'
            //     // });
            //   }
            // })
          };
          // 监听socket错误
          this.socket.onerror = function () {
            that.$notify({
              title: '错误',
              message: '服务器错误，无法接收实时报警信息',
              type: 'error',
              duration: 0
            });
          };
          // 监听socket关闭
          this.socket.onclose = function () {
            console.log('WebSocket已关闭');
          }
        }
        // // 获取token保存到vuex中的用户信息，此处仅适用于本项目，注意删除或修改
        // store.dispatch('GetInfo').then(info => {
        //
        // })
      }
    }
    , moreLog() {
      this.$router.push('/mine/loginuser')
    }
  }
}
</script>

<style lang="scss" scoped>
.login-str {
  span {
    color: #999999;
  }
}

.home-cls {
  padding: 2rem;
  text-align: center;
  font-size: 5rem;
}

.dashboard-editor-container {
  padding: 15px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

.box {
  background: linear-gradient(left, #f71605, #e0f513);
  background: -webkit-linear-gradient(left, #f71605, #e0f513);
  background: -o-linear-gradient(right, #f71605, #e0f513);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: scratchy 2s linear forwards infinite;
  /* 其它浏览器兼容性前缀 */
  -webkit-animation: scratchy 2s linear forwards infinite;
  -moz-animation: scratchy 2s linear forwards infinite;
  -ms-animation: scratchy 2s linear forwards infinite;
  -o-animation: scratchy 2s linear forwards infinite;
}

@keyframes scratchy {
  0% {
    background-position: 0 0;
  }

  25% {
    background-position: 0 0;
  }

  26% {
    background-position: 20px -20px;
  }

  50% {
    background-position: 20px -20px;
  }

  51% {
    background-position: 40px -40px;
  }

  75% {
    background-position: 40px -40px;
  }

  76% {
    background-position: 60px -60px;
  }

  99% {
    background-position: 60px -60px;
  }

  100% {
    background-position: 0 0;
  }
}

/* 添加兼容性前缀 */
@-webkit-keyframes scratchy {
  0% {
    background-position: 0 0;
  }

  25% {
    background-position: 0 0;
  }

  26% {
    background-position: 20px -20px;
  }

  50% {
    background-position: 20px -20px;
  }

  51% {
    background-position: 40px -40px;
  }

  75% {
    background-position: 40px -40px;
  }

  76% {
    background-position: 60px -60px;
  }

  99% {
    background-position: 60px -60px;
  }

  100% {
    background-position: 0 0;
  }
}

@-moz-keyframes scratchy {
  0% {
    background-position: 0 0;
  }

  25% {
    background-position: 0 0;
  }

  26% {
    background-position: 20px -20px;
  }

  50% {
    background-position: 20px -20px;
  }

  51% {
    background-position: 40px -40px;
  }

  75% {
    background-position: 40px -40px;
  }

  76% {
    background-position: 60px -60px;
  }

  99% {
    background-position: 60px -60px;
  }

  100% {
    background-position: 0 0;
  }
}

@-ms-keyframes scratchy {
  0% {
    background-position: 0 0;
  }

  25% {
    background-position: 0 0;
  }

  26% {
    background-position: 20px -20px;
  }

  50% {
    background-position: 20px -20px;
  }

  51% {
    background-position: 40px -40px;
  }

  75% {
    background-position: 40px -40px;
  }

  76% {
    background-position: 60px -60px;
  }

  99% {
    background-position: 60px -60px;
  }

  100% {
    background-position: 0 0;
  }
}

@-o-keyframes scratchy {
  0% {
    background-position: 0 0;
  }

  25% {
    background-position: 0 0;
  }

  26% {
    background-position: 20px -20px;
  }

  50% {
    background-position: 20px -20px;
  }

  51% {
    background-position: 40px -40px;
  }

  75% {
    background-position: 40px -40px;
  }

  76% {
    background-position: 60px -60px;
  }

  99% {
    background-position: 60px -60px;
  }

  100% {
    background-position: 0 0;
  }
}

@media (max-width:768px) {
  .home-cls {
    padding: 1rem;
    text-align: center;
    font-size: 3rem;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
